@extends('layouts/app')
{{--活动详情--}}

@section('content')
    <div class="search-title" id="#">
        <div class="weui-search-bar" id="searchBar">
            <form class="weui-search-bar__form">
                <div class="weui-search-bar__box" style="height: auto;">
                    <i class="weui-icon-search"></i>
                    <input type="search" class="weui-search-bar__input" id="searchInput" placeholder="搜索" required="">
                    <a href="javascript:" class="weui-icon-clear" id="searchClear"></a>
                </div>
                <label class="weui-search-bar__label" id="searchText">
                    <i class="weui-icon-search"></i>
                    <span>搜索</span>
                </label>
            </form>
            <a href="javascript:" class="weui-search-bar__cancel-btn bule" id="searchCancel">取消</a>
        </div>
    </div>
    <div class="c-content">
        <div class="cities-content">
            {{--最近使用--}}
            <div class="used">
                <h4 class="box-title">最近使用</h4>
                <div class="used-content">
                    <div class="city-btn default-city">
                        <svg class="icon bule" aria-hidden="true">
                            <use xlink:href="#icon--25"></use>
                        </svg>
                        <span>广州</span>
                    </div>

                </div>
            </div>
            {{--热门城市--}}
            <div class="hot-city">
                <h4 class="box-title">热门城市</h4>
                <div class="used-content">
                    <div class="city-btn">广州</div>
                    <div class="city-btn">佛山</div>
                    <div class="city-btn">深圳</div>

                </div>
                <div class="used-content">
                    <div class="city-btn">惠州</div>
                    <div class="city-btn">东莞</div>
                    <div class="city-btn">清远</div>
                </div>
            </div>
        </div>

        <div class="city-list">

        </div>
        <div class="letter-list">

        </div>
    </div>


    <script src="/js/cities.js"></script>
    {{--<script charset="utf-8" src="https://3gimg.qq.com/lightmap/components/geolocation/geolocation.min.js "></script>--}}
    <script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp"></script>
    <script>
        console.log("cityData", cityData);

        // 获取缓存的历史记录
        var city = Storage.get("cityData");
        if (city.status) {
           city = JSON.parse(city.value);
           console.log("city",city);
           $(".default-city span").text(city[0].city);

           if (city.length > 1) {
               var newCityArr = [];
               if (city.length > 2) {
                   newCityArr = city.slice(-2);
               } else {
                   newCityArr = city.slice(-1);
               }

               console.log("newCityArr",newCityArr);
               var cityHtml = [],
                   len = newCityArr.length - 1;
               for (var i = len; i >=0; i--) {
                   cityHtml.push('<div class="city-btn">');
                   cityHtml.push(newCityArr[i].detail.addressComponents.city);
                   cityHtml.push('</div>');
               }
               $(".used .used-content").append(cityHtml.join(''));
           }


        }

        var htmlText = [];
        for (var key in cityData) {
            console.log("key", key);
            htmlText.push('<div class="weui-cells__title">');
            htmlText.push('<span class="hash" id="' + key + '">');
            htmlText.push(key);
            htmlText.push('</span>');
            htmlText.push('</div>');
            htmlText.push('<div class="weui-cells">');
            for (var i = 0; i < cityData[key].length; i++) {

                htmlText.push('<div class="weui-cell" onclick="getLocation('+ '\'' + cityData[key][i] + '\'' + ')">');
                htmlText.push('<div class="weui-cell__bd">');
                htmlText.push('<p>');
                htmlText.push(cityData[key][i]);
                htmlText.push('</p>');
                htmlText.push('</div>');
                htmlText.push('</div>');

            }
            htmlText.push('</div>');
            console.log("cityData[key]", cityData[key]);
        }
        $(".city-list").html(htmlText.join(''));

        var letterText = [];
        for (var key in firstLetter) {
            letterText.push('<a href="javascript:;" data-id="#'+ firstLetter[key] +'">');
            letterText.push(firstLetter[key]);
            letterText.push('</a>');
        }
        $(".letter-list").html(letterText.join(''));


        function getLocation (str) {
            console.log("str", str);
            // 根据地址获得详细信息
            var geocoder = new qq.maps.Geocoder({
                complete : function(result) {
                    console.log("city", city);
                    if (city.length > 0) {
                        city.push(result);
                        Storage.set("cityData", JSON.stringify(city), function () {
                            location.href="/"
                        });

                    }

                }
            });

            geocoder.getLocation(str);
        }

        // 页面内的锚点跳转
        $(".letter-list").on("click", "a", function () {
            console.log(this);
            var id = $(this).attr("data-id");

            console.log("id", id);
            $('html, body').animate({scrollTop: $(id).offset().top}, 100)
        });

        //
        $(".used-content").on("click", ".city-btn", function () {
            var text = $(this).text();
            getLocation(text);
        });

    </script>

@endsection

@extends('layouts/footer')
